<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>压缩图片</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <script type="text/javascript" src="/Public/js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="/Public/js/megapix-image.js"></script>
    <script type="text/javascript" src="/Public/layer_mobile/layer.js"></script>
    <script type="text/javascript" src="/Public/js/exif.js"></script>
    <style type="text/css">
        html,body{
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
        }
        .toBar{
            width: 100%;
            padding: 15px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            position: absolute;
            z-index: 100;
            bottom:0
        }
        .toBar  button{
            display: inline-block;
            width: 100px;
            text-align: center;
            padding: 10px 0;
            font-size: 12px;
            color: #fff;
            background: #8080ca;
            border-radius: 6px;
            cursor: pointer;
        }
        .toBar .right{
            border: none;
            float: right;
        }
        canvas{
            z-index: 1;
        }
        #container{
            width: 100%;
            height: 80%;
            overflow: hidden;
            margin:auto;
            display: table-cell;
            text-align: center;
        }
        #file{ display: none;}
    </style>
</head>
<body>
<div class="toBar">
    <button class="left" type="button">取消</button>
    <button class="right" type="button">确定</button>
</div>
<div id="container">
    <input type="file" id="file" accept="image/*"  name="cameraInput"   class="sign_file" />
    <canvas id="myCanvas" width="<{$width}>" height="<{$height}>"></canvas>
</div>
<script type="text/javascript" language="javascript">
   $(document).ready(function(){
       parent.closeLoad();
       $('#container,body').css({'height':parent.document.body.clientHeight+"px",'width':parent.document.body.clientWidth+"px"});

       var fileInput = document.getElementById('file');
       fileInput.onchange = function () {
           parent.load();
           var file = fileInput.files[0];
           var mpImg = new MegaPixImage(file);

           var orientation=6;
           //获取照片方向角属性，用户旋转控制
           EXIF.getData(file, function() {
               orientation = EXIF.getTag(this, 'Orientation');
           });

           var resCanvas1 = document.getElementById('myCanvas');
           mpImg.render(resCanvas1, {
               maxHeight: $('#container').height(),
               maxWidth: $('#container').width(),
               orientation: orientation,
               quality:1
           },function(){ // $('#container').css({'width':$('#myCanvas').css('width')});
               parent.closeLoad();
                       });
       };
   })




    $(".right").on("click", function() {
        layer.open({
            type: 2
            ,content: '图片正在压缩上传中。。。'
        });

        // 获取 canvas DOM 对象
        var canvas = document.getElementById("myCanvas");
        // 获取Base64编码后的图像数据，格式是字符串
        // "data:image/png;base64,"开头,需要在客户端或者服务器端将其去掉，后面的部分可以直接写入文件。
        var dataurl = canvas.toDataURL("image/png");

        $.post('./api.php?m=Api&c=index&a=base64upload&from=<{$imgType}>', {dataURL: dataurl}, function (ans) {
            console.log(ans)
            if (ans.status==0) {
                parent.newImg(ans.url);
                resetCanvas();
                location.reload();
            }
        }, 'json');
    });

   function resetCanvas(){
       parent.load()
       location.reload();
       parent.closeIframeResize();
   }

    $(".left").on("click", function() {
        resetCanvas();
    });



</script>
</body>
</html>